<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>电影详情</title>
    <style>
        .hiddenDiv{
            display: none;
        }
        .showDiv{
            display: block;
        }
    </style>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
    <script src="./js/vue2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/areas.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script type="text/javascript" src="./js/qs.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/base64.js"></script>

    <link rel="stylesheet" href="./css/common.d1d257d3.css">
    <link rel="stylesheet" href="./css/movie-detail.86416149.css">

</head>
<body>

<div id="app">

    <div class="header">
        <div class="header-inner">
            <a href="index.html" class="logo"></a>
            <div class="city-container" >
                <div class="city-selected">
                    <div class="city-name">
                        &nbsp;
                        <!--                        <span class="caret"></span>-->
                    </div>
                </div>
                <div class="city-list" >
                    <div class="city-list-header">定位城市：<a id="shanghai" class="js-geo-city">上海</a></div>
                </div>
            </div>

            <div class="nav">
                <ul class="navbar">
                    <li><a href="index.html" >首页</a></li>
                    <li><a href="movie.html" >电影</a></li>
                    <li><a href="cinema.html" >影院</a></li>
                    <li><a href="dashboard_websocket.html" target="_blank">榜单</a></li>

                </ul>
            </div>

            <div class="user-info" v-if="islogin">
                <div class="user-avatar has-login">
                    <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
                    <span class="caret"></span>
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="./orderlist.html">我的订单</a></li>
                        <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
                        <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <div class="user-info" v-if="!islogin">
                <div class="user-avatar J-login">
                    <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
                    <span class="caret"></span>
                    <ul class="user-menu no-login-menu">
                        <li><a href="javascript:void(0)" @click="login">登录</a></li>
                    </ul>
                </div>
            </div>

            <form target="_blank" class="search-form" >
                <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
                       autocomplete="off">
                <input class="submit" type="button"  @click="doSearch"/>
            </form>

        </div>
    </div>
    <div class="header-placeholder"></div>

    <div class="banner">
        <div class="wrapper clearfix">
            <div class="celeInfo-left">
                <div class="avatar-shadow">
                    <img class="avatar" :src="movieImagePath+movie.movieImg">
                    <div class="movie-ver"></div>
                </div>
            </div>
            <div class="celeInfo-right clearfix">
                <div class="movie-brief-container">
                    <h1 class="name">{{movie.movieName}}</h1>
                    <div class="ename ellipsis">{{movie.movieEname}}</div>
                    <ul>
                        <li class="ellipsis">
                            <span>{{movie.movieTypeStr}}</span>
                        </li>
                        <li class="ellipsis">
                            时长{{movie.movieTime}}分钟
                        </li>
                        <li class="ellipsis">{{movie.movieReleaseTime}}{{movie.movieAreaStr}}上映</li>
                    </ul>
                </div>
                <div class="action-buyBtn">
                    <div class="action clearfix">
                        <a :class="wishCls" @click="addToWish()">
                            <div>
                                <i class="icon wish-icon"></i>
                                <span class="wish-msg">想看</span>
                            </div>
                        </a>
                        <a :class="scoreCls" href="javascript:void(0)" @click="showCommentContainer">
                            <div>
                                <i class="icon score-btn-icon"></i>
                                <span class="score-btn-msg">评分</span>
                            </div>
                        </a>
                    </div>
                    <a class="btn buy" :href="cinemaPage+movie.movieId" target="_blank">特惠购票</a>
                </div>

                <div class="movie-stats-container">

                    <div class="movie-index">
                        <p class="movie-index-title">口碑</p>
                        <div class="movie-index-content score normal-score">
                              <span class="index-left info-num">
                                <span class="stonefont">{{movie.movieScore}}分</span>
                              </span>
                    <div class="index-right">
                        <div class="star-wrapper">
                            <div class="star-on" style="width:79%;"></div>
                        </div>
                        <span class="score-num">{{movie.commentUserCount}}万人评分</span>
                    </div>
                        </div>
                    </div>


                    <div class="movie-index">
                        <p class="movie-index-title">累计票房</p>
                        <div class="movie-index-content box">
                            <span class="stonefont">{{movie.movieBoxOffice}}万</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="container">
        <div class="main-content-container clearfix">
            <div class="main-content">
                <div class="tab-container tab-movie-info">
                    <div class="crumbs-nav-container">
                        <a href="javascript:void(0)">电影</a> &gt; <a href="javascript:void(0)">电影</a> &gt; <span>{{movie.movieName}}</span>
                    </div>
                    <div class="tab-title-container clearfix">
                        <div class="tab-title active">介绍</div>
                        <!--                    <div class="tab-title ">演职人员</div>-->
                        <!--                    <div class="tab-title tab-disabled">奖项</div>-->
                        <!--                    <div class="tab-title ">图集</div>-->
                    </div>
                    <div class="tab-content-container">
                        <div class="tab-desc tab-content active">

                            <div class="module">
                                <div class="mod-title">
                                    <h2>剧情简介</h2>
                                </div>
                                <div class="mod-content">
                                    <span class="dra">{{movie.movieInfo}}</span>
                                </div>
                            </div>


                            <div class="module">
                                <div class="mod-title">
                                    <h2>演职人员</h2>
                                </div>
                                <div class="mod-content">
                                    <div class="celebrity-container clearfix">
                                        <div class="celebrity-group">
                                            <div class="celebrity-type">
                                                <span>导演</span>
                                            </div>
                                            <ul class="celebrity-list clearfix">
                                                <li class="celebrity"  v-for="(celebrity,index) in movieActorList" v-if="celebrity.movieActorType==0" >
                                                    <a href="javascript:void(0)" class="portrait">
                                                        <img class="default-img"
                                                             :src="actorImgPath+celebrity.actorImg">
                                                    </a>
                                                    <div class="info">
                                                        <a href="javascript:void(0)"  class="name">
                                                            {{celebrity.actorName}}
                                                        </a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="celebrity-group">
                                            <div class="celebrity-type">
                                                <span>演员</span>
                                            </div>
                                            <ul class="celebrity-list clearfix">
                                                <li class="celebrity actor"  v-for="(celebrity,index) in movieActorList" v-if="celebrity.movieActorType==1">
                                                    <a href="javascript:void(0)" class="portrait">
                                                        <img class="default-img"
                                                             :src="actorImgPath+celebrity.actorImg">
                                                    </a>
                                                    <div class="info">
                                                        <a href="javascript:void(0)"  class="name">
                                                            {{celebrity.actorName}}
                                                        </a>
                                                        <br><span class="role">{{celebrity.movieActorRole}}</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>


                                    </div>

                                </div>
                            </div>


                            <div class="module">
                                <div class="mod-title">
                                    <h2>图集</h2>
                                </div>
                                <div class="mod-content">
                                    <div class="album clearfix">
                                        <div class="img1">
                                            <img class="default-img"
                                                 :src="movieImagePath+img.movieImg" v-for="(img,index) in movieImgList" :key="img.id" v-if="img.type==2">
                                        </div>
                                        <div class="img2"  v-for="(img,index) in movieImgList" :key="img.id" v-if="img.type==3">
                                            <img class="default-img" :src="movieImagePath+img.movieImg">
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="module">
                                <div class="mod-title">
                                    <h2>热门短评</h2>
                                </div>
                                <div class="mod-content">
                                    <div class="comment-list-container" >
                                        <ul>
                                            <li class="comment-container" v-for="comment in userCommentList" >
                                                <div class="portrait-container">
                                                    <div class="portrait">
                                                        <img src="./images/movie/ebf548135ebf96c1b67ec8ba0acfaab72810.jpg@100w_100h_1e_1c"
                                                             alt="">
                                                    </div>
                                                    <i class="level-3-icon"></i>
                                                </div>
                                                <div class="main">
                                                    <div class="main-header clearfix">
                                                        <div class="user">
                                                            <span class="name">{{comment.userAccount}}</span>
                                                            <span class="tag">购</span>
                                                        </div>
                                                        <div class="time" >
                                                            <span>{{comment.createTime}}</span>
                                                            <ul class="score-star clearfix">
                                                                <li>
                                                                    <i :class="comment.userScore>=1?'half-star left active':'half-star left'"></i><i
                                                                        :class="comment.userScore>=2?'half-star right active':'half-star right'"></i></li>
                                                                <li>
                                                                    <i :class="comment.userScore>=3?'half-star left active':'half-star left'"></i><i
                                                                        :class="comment.userScore>=4?'half-star right active':'half-star right'"></i></li>
                                                                <li>
                                                                    <i :class="comment.userScore>=5?'half-star left active':'half-star left'"></i><i
                                                                        :class="comment.userScore>=6?'half-star right active':'half-star right'"></i></li>
                                                                <li>
                                                                    <i :class="comment.userScore>=7?'half-star left active':'half-star left'"></i><i
                                                                        :class="comment.userScore>=8?'half-star right active':'half-star right'"></i></li>
                                                                <li>
                                                                    <i :class="comment.userScore>=9?'half-star left active':'half-star left'"></i><i
                                                                        :class="comment.userScore>=10?'half-star right active':'half-star right'"></i></li>
                                                            </ul>

                                                        </div>

                                                    </div>
                                                    <div class="comment-content">{{comment.userComment}}</div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="related">
                <div class="tab-container tab-relate-info">
                    <div class="tab-title-container related-tab-title clearfix">
                        <div class="tab-title active ">预告片</div>

                    </div>
                    <div class="tab-content-container">
                        <div class="tab-preview tab-content active" >
                            <div class="module">
                                <div class="mod-title">
                                    <h2>预告片</h2>
                                </div>
                                <div class="mod-content">
                                    <div class="preview-container">
                                        <ul>
                                            <li class="top-list">
                                                <div>
                                                    <div class="top-info-thumb">
                                                        <a href="javascript:void(0)">
                                                            <img src="./images/movie/226adc16504f7aab46b6ee8593357748.jpg"
                                                                 alt="">
                                                            <i class="ranking top-info-icon orange-bg">1</i>
                                                            <i class="play-icon"></i>
                                                        </a>
                                                    </div>
                                                    <div class="top5-video-info">
                                                        <p class="one-line">
                                                            <a href="javascript:void(0)">
                                                                《如果声音不记得》
                                                            </a>
                                                        </p>
                                                        <div class="video-view">
                                                            <span class="video-play-count">235.1万</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="top-list">
                                                <div>
                                                    <div class="top-info-thumb">
                                                        <a href="javascript:void(0)">
                                                            <img src="./images/movie/2199e628bb4d6fc49e1ce13fddc15e5d1634782.jpg@160w_220h_1e_1c.jpg"
                                                                 alt="">
                                                            <i class="ranking top-info-icon orange-bg">2</i>
                                                            <i class="play-icon"></i>
                                                        </a>
                                                    </div>
                                                    <div class="top5-video-info">
                                                        <p class="one-line">
                                                            <a href="javascript:void(0)">
                                                                《缉魂》
                                                            </a>
                                                        </p>
                                                        <div class="video-view">
                                                            <span class="video-play-count">71.2万</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="top-list">
                                                <div>
                                                    <div class="top-info-thumb">
                                                        <a href="javascript:void(0)">
                                                            <img src="./images/movie/4c01895cfd53e82f7c3048c407974a6b4739229.jpg@464w_644h_1e_1c.jpg"
                                                                 alt="">
                                                            <i class="ranking top-info-icon orange-bg">3</i>
                                                            <i class="play-icon"></i>
                                                        </a>
                                                    </div>
                                                    <div class="top5-video-info">
                                                        <p class="one-line">
                                                            <a href="javascript:void(0)">
                                                                《攀登者》
                                                            </a>
                                                        </p>
                                                        <div class="video-view">
                                                            <span class="video-play-count">26万</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>


                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="module">
                        <div class="mod-title">
                            <h2>相关电影</h2>
                        </div>
                        <div class="mod-content">
                            <div class="related-movies">
                                <dl class="movie-list">
                                    <dd>
                                        <div class="movie-item film-channel">
                                            <a href="javascript:void(0)">
                                                <div class="movie-poster">
                                                    <img class="poster-default"
                                                         src="./images/movie/loading_2.e3d934bf.png">
                                                    <img alt="晴雅集海报封面"
                                                         src="./images/movie/be4418055735904a43e41ddf4c364db81444834.jpg@106w_145h_1e_1c.jpg">
                                                </div>
                                            </a>
                                            <div class="movie-ver"></div>
                                            <div class="movie-item-hover">
                                                <a href="javascript:void(0)">
                                                    <img class="movie-hover-img"
                                                         src="./images/movie/be4418055735904a43e41ddf4c364db81444834.jpg@218w_300h_1e_1c.jpg"
                                                         alt="晴雅集">

                                                </a>
                                            </div>
                                        </div>
                                        <div class="channel-detail movie-item-title" title="晴雅集">
                                            <a href="javascript:void(0)">晴雅集</a>
                                        </div>
                                        <div class="channel-detail channel-detail-orange"><i class="integer">9.</i><i
                                                class="fraction">0</i></div>

                                    </dd>
                                    <dd>
                                        <div class="movie-item film-channel">
                                            <a href="javascript:void(0)">
                                                <div class="movie-poster">
                                                    <img class="poster-default"
                                                         src="./images/movie/loading_2.e3d934bf.png">
                                                    <img alt="真假美猴王之大圣无双海报封面"
                                                         src="./images/movie/0210d0f7b580f42ab8318d1828178a674979894.jpg@106w_145h_1e_1c.jpg">
                                                </div>
                                            </a>
                                            <div class="movie-ver"></div>
                                            <div class="movie-item-hover">
                                                <a href="javascript:void(0)">
                                                    <img class="movie-hover-img"
                                                         src="./images/movie/0210d0f7b580f42ab8318d1828178a674979894.jpg@218w_300h_1e_1c.jpg"
                                                         alt="真假美猴王之大圣无双">

                                                </a>
                                            </div>
                                        </div>

                                        <div class="channel-detail movie-item-title" title="真假美猴王之大圣无双">
                                            <a href="javascript:void(0)">真假美猴王之大圣无双</a>
                                        </div>
                                        <div class="channel-detail channel-detail-orange">暂无评分</div>

                                    </dd>
                                    <dd>
                                        <div class="movie-item film-channel">
                                            <a href="javascript:void(0)">
                                                <div class="movie-poster">
                                                    <img class="poster-default"
                                                         src="./images/movie/loading_2.e3d934bf.png">
                                                    <img alt="月半爱丽丝海报封面"
                                                         src="./images/movie/3b15b45b97c8b134e5b9cce8492231613207907.jpg@106w_145h_1e_1c.jpg">
                                                </div>
                                            </a>
                                            <div class="movie-ver"></div>
                                        </div>

                                        <div class="channel-detail movie-item-title" title="月半爱丽丝">
                                            <a href="ajavascript:void(0)">月半爱丽丝</a>
                                        </div>
                                        <div class="channel-detail channel-detail-orange"><i class="integer">7.</i><i
                                                class="fraction">6</i></div>

                                    </dd>
                                    <dd>
                                        <div class="movie-item film-channel">
                                            <a href="javascript:void(0)">
                                                <div class="movie-poster">
                                                    <img class="poster-default"
                                                         src="./images/movie/loading_2.e3d934bf.png">
                                                    <img alt="指挥家海报封面"
                                                         src="./images/movie/3252dee97808fd77d1649ac1659b027c728790.jpg@106w_145h_1e_1c.jpg">
                                                </div>
                                            </a>
                                            <div class="movie-ver"></div>

                                        </div>

                                        <div class="channel-detail movie-item-title" title="指挥家">
                                            <a href="javascript:void(0)">指挥家</a>
                                        </div>
                                        <div class="channel-detail channel-detail-orange">暂无评分</div>

                                    </dd>
                                    <dd>
                                        <div class="movie-item film-channel">
                                            <a href="javascript:void(0)">
                                                <div class="movie-poster">
                                                    <img class="poster-default"
                                                         src="./images/movie/loading_2.e3d934bf.png">
                                                    <img alt="大红包海报封面"
                                                         src="./images/movie/f83b5229e22b7b3781df33373864401e951844.jpg@106w_145h_1e_1c.jpg">
                                                </div>
                                            </a>

                                        </div>

                                        <div class="channel-detail movie-item-title" title="大红包">
                                            <a href="javascript:void(0)">大红包</a>
                                        </div>
                                        <div class="channel-detail channel-detail-orange">暂无评分</div>

                                    </dd>
                                    <dd>
                                        <div class="movie-item film-channel">
                                            <a href="javascript:void(0)">
                                                <div class="movie-poster">
                                                    <img class="poster-default"
                                                         src="./images/movie/loading_2.e3d934bf.png">
                                                    <img alt="老爷保号海报封面"
                                                         src="./images/movie/156f93f2f4150c45c7ec29bb870b95744572563.jpg@106w_145h_1e_1c.jpg">
                                                </div>
                                            </a>
                                            <div class="movie-ver"></div>
                                        </div>

                                        <div class="channel-detail movie-item-title" title="老爷保号">
                                            <a href="javascript:void(0)">老爷保号</a>
                                        </div>
                                        <div class="channel-detail channel-detail-orange">暂无评分</div>

                                    </dd>

                                </dl>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="footer" style="visibility: visible;"></div>
    <div  :class="commentFormCls" id="comment-container" >
        <div id="comment-form-container" class="jBox-wrapper jBox-Modal jBox-Default"
         style="position: fixed;  opacity: 1; z-index: 10000; left: 50%; top: 50%; margin-left: -285px; margin-top: -235px;">
        <div class="jBox-container">
            <div class="jBox-content" style="width: 550px; height: 450px;">
                <form id="comment-form">
                    <div class="score-msg-container active">
                        <div class="score"><span class="num">{{userScore}}</span>分</div>
                        <div class="no-score">
                            请点击星星评分
                        </div>
                    </div>
                    <div class="score-star-contaienr">
                        <ul class="score-star clearfix">
                            <li><i :class="star[0]" @click="addScore(0)"></i><i :class="star[1]" @click="addScore(1)"></i></li>
                            <li><i :class="star[2]" @click="addScore(2)"></i><i :class="star[3]" @click="addScore(3)"></i></li>
                            <li><i :class="star[4]" @click="addScore(4)"></i><i :class="star[5]" @click="addScore(5)"></i></li>
                            <li><i :class="star[6]" @click="addScore(6)"></i><i :class="star[7]" @click="addScore(7)"></i></li>
                            <li><i :class="star[8]" @click="addScore(8)"></i><i :class="star[9]" @click="addScore(9)"></i></li>
                        </ul>

                    </div>
                    <div class="content-container">
                        <textarea placeholder="请输入评论内容" v-model="userComment"  cols="30" rows="10"></textarea>
                        <span class="word-count-info"></span>
                    </div>

                    <input class="btn" type="button" value="提交" @click="submitComment">
                </form>
                <div class="close" @click="closeComment">×</div>
            </div>
        </div>
    </div>
    </div>
</div>
</body>
<script type="text/javascript">

    let vm = new Vue({
        el: "#app",//绑定，告知vue负责管理页面的哪个部分
        data: {
            islogin:false,
            movieImagePath:'./images/movie/',//电影图片的路径前缀
            commentFormCls:'hiddenDiv',//是否显示评论窗口
            wantSelected:0,//想看按钮是否被选中，0-未选中，1-已选中
            wishCls:'wish',//想看电影图标未激活
            scoreCls:'score-btn',//评分按钮未激活
            scoreSelected:0,//是否已经评分，0-未评，1-已评
            starLeftInactiveCls:"half-star left",//评分的五角星左边半颗未选中的css
            starLeftActiveCls:"half-star left active",//评分的五角星左边半颗已选中的css
            starRightInactiveCls:"half-star right",//评分的五角星右边半颗未选中的css
            starRightActiveCls:"half-star right active",//评分的五角星右边半颗已选中的css
            //评分的五角星的css的数组
            star:[
                "half-star left","half-star right ","half-star left ","half-star right ","half-star left ","half-star right ","half-star left ","half-star right ","half-star left ","half-star right "
            ],
            userScore:0,//用户给电影的评分
            userScoreInDb:0,//数据库中保存的用户评分
            userComment:'',//用户评论内容
            userCommentInDb:'',//数据库中保存的用户评论内容
            commentId:0, //用户评论的id
            movieId:166,//电影id
            wantId:0,//用户想看记录表的id
            //用户对电影的评论列表
            userCommentList: [{"commentId":15,"userId":22,"userComment":"测试测试测试","userScore":10,"movieId":166,"userAccount":"13911111111","userName":"13911111111"}],
            cinemaPage:'cinema.html?movieId=',//电影院的请求页面
            actorImgPath:'./images/',//演员照片的路径前缀
            searchKey:'',//页面搜索框绑定的变量,

            moviePoster:'',//电影海报图片
            movie:{},//电影对象
            movieTypeStr:'',//电影类型拼接的字符串
            movieTypeId2Name:new Map(),//电影类型id和name的map
            movieAreaList:[],//电影地区列表
            movieAreaStr:'',//电影首映地区名称
            movieActorList:[],//演员角色列表
            actorList:[],//演员列表
            movieImgList:[],//电影图片列表
        },
        methods: {
            //搜索
            /**
             * url:search.html
             * method:get
             * param: searchKey
             * url使用encodeURI编码,例如：encodeURI("search.html?searchKey=万达")
             */
            doSearch() {
                location.href=encodeURI("search.html?searchKey="+this.searchKey)
            },

            //获取电影信息
            /**
             * url:  cinema/cinema/movie/web/queryMovieByMovieId
             * method: get
             * param: movieId
             * return: 返回的数据赋值给movie
             */
            loadMovie(){
                axios({
                    url:'cinema/cinema/movie/web/queryMovieByMovieId',
                    method:'get',
                    params:{
                        movieId:this.movieId
                    }
                }).then(res=>{
                    console.log('loadMovie',res);
                    this.movie = res.data
                })
            },

            //根据电影id查询演员
            queryMovieActors(){
                axios({
                    url:'cinema/cinema/actor/web/queryMovieActors',
                    method:'get',
                    params:{
                        movieId:this.movieId
                    }
                }).then(res=>{
                    this.movieActorList = res.data;
                })
            },
            //根据电影id查询演图片，放在movieImgList中
            queryMovieImages(){
                axios({
                    url:'cinema/cinema/movieimage/web/list',
                    method:'get',
                    params:{
                        movieId:this.movieId,
                        pageNum:1,
                        pageSize:20
                    }
                }).then(res=>{
                    this.movieImgList = res.rows;
                })

            },
            /**
             * 根据电影id获取类型
             *
            */
            queryMovieTypeByMovieId(){


            },

             //加载电影的评论列表
            /**
             * url: cinema/cinema/comment/list
             * method: get
             * param: pageNum=1
             * param: pageSize=100
             * param: movieId
             * return: 返回的列表赋值给 userCommentList
             */
            loadCommentList(){
                axios({
                    url:'cinema/cinema/comment/web/list',
                    method:'get',
                    params:{
                        movieId:this.movieId,
                        pageNum:1,
                        pageSize:20
                    }
                }).then(res=>{
                    this.userCommentList = res.rows;
                })
            },
            //显示评分窗口this.commentFormCls='showDiv'
            showCommentContainer(){
                this.commentFormCls='showDiv'

            },
            //隐藏评论窗口this.commentFormCls='hiddenDiv'
            hideCommentContainer(){

            },

            //初始化评论页面的星星的css样式
            resetStarClass(){
                //1.清空star数组

                //2.用户打分设置为0


                //3.for循环i=0,i<10
                    //3.1 在评论页面总计有5个星星，每个星星的左半边序号为偶数(i%2==0)，调用this.star.push(this.starLeftInactiveCls)向数组中加入左侧星星未选中的css:this.starLeftInactiveCls
                   //3.2 每个星星的右半边序号为奇数,把右半边的星星css也设置成未选中:this.star.push(this.starRightInactiveCls)


            },
            //用户点击星星评分
            addScore(idx){

                //1. 根据用户点击的星星所在数据的下标(因为下标是从0开始的，所以这里的分数要加1)，设置分数this.userScore=idx+1
                //2. 清空star数组(this.star=[]),然后根据最新选择的分数，重新生成一遍star数组的数据
                //3. for循环i=0,i<10
                //3.1 如果i是偶数(i%2==0),那么代表每一个星星的左半部分，
                //      3.1.1 如果当前的i<=idx,那么用户点击的那颗星星左侧的所有星星都需要被激活(由于这里i是偶数，所以这里激活左半边星星)：this.star.push(this.starLeftActiveCls)
                //      3.1.2 否则(i>idx),那么用户点击的那颗星星右侧的星星都不用被激活(由于这里i是偶数，右边所有星星的左半边都不需要激活)：his.star.push(this.starLeftInactiveCls)
                //3.2 如果i是奇数(i%2!=0),那么代表每一个星星的右半部分，
                //      3.2.1 如果当前的i<=idx,那么用户点击的那颗星星左侧的所有星星都需要被激活(由于这里i是奇数，所以这里激活右半边星星)：this.star.push(this.starLeftActiveCls)
                //      3.2.2 否则(i>idx),那么用户点击的那颗星星右侧的星星都不用被激活(由于这里i是奇数，右边所有星星的奇半边都不需要激活)：this.star.push(this.starRightInactiveCls)

                // starLeftInactiveCls:"half-star left",//评分的五角星左边半颗未选中的css
                //     starLeftActiveCls:"half-star left active",//评分的五角星左边半颗已选中的css
                //     starRightInactiveCls:"half-star right",//评分的五角星右边半颗未选中的css
                //     starRightActiveCls:"half-star right active",//评分的五角星右边半颗已选中的css
                //清空数组
                this.star=[]
                for(var it=0;it<10;it++){
                    if(it%2==0){
                        if(it>idx){
                            this.star.push(this.starLeftInactiveCls);
                        }else{
                            this.star.push(this.starLeftActiveCls);
                        }
                    }else{
                        if(it>idx){
                            this.star.push(this.starRightInactiveCls);
                        }else{
                            this.star.push(this.starRightActiveCls);
                        }
                    }
                }
                this.userScore=idx+1;
            },
            //关闭评分窗口
            closeComment(){
                //1. if分支：如果是第一次评分if(this.scoreSelected==0)==true，还未保存过，还原星星的设置
                    // 调用this.resetStarClass() 还原评论窗口的星星的设置为默认
                //2. else 分支：如果是已经评论过，this.userComment=this.userCommentInDb,this.userScore=this.userScoreInDb
                //3. 设置 this.commentFormCls='hiddenDiv'把评论窗口的css设置为隐藏，隐藏评论窗口
                this.commentFormCls='hiddenDiv'
                if(this.scoreSelected==1){
                    this.userComment=this.userCommentInDb;
                    this.userScore=this.userScoreInDb;
                    this.addScore(this.userScore-1);
                }
            },
            //添加到想看的电影列表
            addToWish(){
				//先检查是否用户登录，如果没有登录，跳转到登录页面
                if(!this.islogin){
                    location.href='login.html';
                }
                //if分支：如果没有添加到想看列表，第一次点击按钮
                    //如果this.wantSelected==0,说明 想看 按钮没有被点击,那么提交一个post请求，给后台添加记录
                    /**
                     * url: cinema/cinema/userwantmovie/web/add
                     * method: post
                     * param: movieId
                     * return: 返回值的id 赋给this.wantId
                     * 在响应函数中
                     * 1.同时把 this.wishCls='wish active'修改 想看 按钮的样式,这时候 "想看" 按钮被选中
                     * 2.设置this.wantSelected=1,表示“想看”按钮已经被选中
                     */

                //else 分支：如果已经点击过了，那么再次点击就会取消
                    /**
                     * url:cinema/cinema/wantmovie/
                     * method: delete
                     * param: this.wantId(路径参数，拼接在URL中，例如cinema/cinema/wantmovie/12 )
                     * return: 无
                     * 在响应函数中
                     * 1. this.wishCls='wish' //设置“想看”按钮未选中的css
                     * 2. this.wantSelected=0 //“想看”按钮被设置未选中
                     * 3. this.wantId=0 //把wantId设置为 0
                     */
                if(this.wantSelected==0){
                    axios({
                        url:'cinema/cinema/userwantmovie/web/add',
                        method:'post',
                        data:{
                            movieId:this.movieId
                        }
                    }).then(res=>{
                        if(res.code==200){
                            this.wantId=res.data
                            this.wantSelected=1
                            this.wishCls='wish active'
                        }else{
                            alert(res.msg)
                        }
                    })
                }else{
                    axios({
                        url:'cinema/cinema/userwantmovie/web/remove?id='+this.wantId,
                        method:'post'
                    }).then(res=>{
                        if(res.code==200){
                            this.wantId=0
                            this.wantSelected=0
                            this.wishCls='wish'
                        }else{
                            alert(res.msg)
                        }
                    })
                }

            },
            //提交评分和评论的请求
            submitComment(){
                //if分支: 第一次评分(this.scoreSelected==0)用post请求添加记录
                    /**
                     * url: cinema/cinema/comment
                     * method: post
                     * param: movieId 电影id
                     * param: userComment 评论内容
                     * param: userScore 用户评分的分数
                     * return: 无
                     * 在响应函数中
                     * 1. this.scoreCls='score-btn active' //设置评分按钮选中的css
                     * 2. 调用 this.hideCommentContainer() 隐藏评论窗口
                     * 3. 设置this.scoreSelected=1 //表示已经评分
                     * 4. 调用checkCommentExist()把刚刚生成的comment对象查询出来
                     */


                //else 分支：已经评分了，现在是更新操作
                    /**
                     * url: cinema/cinema/comment
                     * method: put
                     * param: movieId 电影id
                     * param: userScore 用户给电影的评分
                     * param: commentId 评论id
                     * param: userComment 评论内容
                     * 响应函数中
                     * 1. this.scoreCls='score-btn active' //设置评分按钮选中css
                     * 2. 调用this.hideCommentContainer() 隐藏评论窗口
                     * 3. 设置 this.scoreSelected=1 //表示已经评分
                     */
                if(this.scoreSelected==0){
                    axios({
                        url:'cinema/cinema/comment/web/add',
                        method:'post',
                        data:{
                            userScore:this.userScore,
                            userComment:this.userComment,
                            movieId:this.movieId
                        }
                    }).then(res=>{
                        if(res.code==200){

                            window.location.reload();

                        }else{
                            alert(res.msg)
                        }
                    })
                }else{
                    axios({
                        url:'cinema/cinema/comment/web/edit',
                        method:'post',
                        data:{
                            userScore:this.userScore,
                            userComment:this.userComment,
                            movieId:this.movieId,
                            commentId:this.commentId
                        }
                    }).then(res=>{
                        if(res.code==200){
                            window.location.reload();
                        }else{
                            alert(res.msg)
                        }
                    })
                }

            },
            //页面刚刚加载的时候，从数据库查询是否当前的用户已经选中了 “想看” 按钮
            /**
             * url: cinema/cinema/userwantmovie/web/queryUserWantByUserIdAndMovieId
             * method: get
             * param: movieId
             * return:
             *  1.如果有返回信息if(res.data)==true
             *    1.1 设置this.wantSelected=1 表示已经点击过“想看” 按钮
             *    1.2 设置this.wishCls='wish active' 设置“想看”按钮的css
             *    1.3 设置this.wantId=res.data.id 把返回的想看记录的id设置给wantId变量
             *  2.如果没有点击过想看按钮
             *    2.1 设置this.wantSelected=0 表示没有点击过“想看” 按钮
             *    2.2 设置this.wantId=0 把wantId变量设置为0
             *    2.3 this.wishCls='wish' “想看”按钮的css设置未选中
             */
            checkWantExist(){
                //检查用户是否登录，如果没有，则直接返回
                if(!this.islogin){
                    return;
                }
                axios({
                    url:'cinema/cinema/userwantmovie/web/queryUserWantByUserIdAndMovieId',
                    method:'get',
                    params:{
                        movieId:this.movieId
                    }
                }).then(res=>{
                    if(res.data){
                        this.wantSelected=1;
                        this.wishCls='wish active';
                        this.wantId=res.data.id;
                    }else{
                        this.wantSelected=0;
                        this.wantId=0;
                        this.wishCls='wish';
                    }
                    console.log('checkWantExist',res);
                })

            },
            //检查是否评论记录已经存在
            /**
             * url: cinema/cinema/comment/web/queryCommentByUserIdAndMovieId
             * method: get
             * param: movieId
             * return:
             *   1. 如果有评论存在数据库中 if(res.data)==true
             *     1.1 设置this.scoreSelected=1 表示已经评论过了
             *     1.2 设置this.scoreCls='score-btn active' 把评分按钮的css设置为选中
             *     1.3 设置this.userComment=res.data.userComment 把数据库中返回的评论内容设置给userComment变量
             *     1.4 设置this.userScore=res.data.userScore 把数据库中的用户评分设置给userScore变量
             *     1.5 设置this.commentId=res.data.commentId
             *     1.6 调用this.addScore(this.userScore-1) 把评论弹出框里的被选中的星星数量根据服务端返回的分数设置一下css
             *
             *   2. else 如果在数据库中没有评论
             *     2.1 this.scoreSelected=0 把评分被选中的标志设置为0，代表未评分
             *     2.2 this.scoreCls='score-btn' 设置评分未选中的css
             */
            checkCommentExist(){
                //检查用户是否登录，如果没有，则直接返回
                if(!this.islogin){
                    return;
                }
                axios({
                    url:"cinema/cinema/comment/web/queryCommentByUserIdAndMovieId",
                    method:'get',
                    params:{
                        movieId:this.movieId
                    }
                }).then(res=>{
                    if(res.data){
                        this.scoreSelected=1;
                        this.scoreCls='score-btn active';
                        this.commentId=res.data.commentId;
                        this.userScore=res.data.userScore;
                        this.userScoreInDb=res.data.userScore;
                        this.userComment=res.data.userComment;
                        this.userCommentInDb=res.data.userComment;
                        this.addScore(this.userScore-1);
                    }else{
                        this.scoreSelected=0;
                        this.scoreCls='score-btn';
                        this.commentId=0;
                        this.userScore=0;
                        this.userComment=''
                    }
                })

            },
            //把id=comment-container的元素的不可见属性去掉
            removeClass(){

            },
            //退出登录，跳转到主页
            logout(){
                removeToken()
                localStorage.removeItem("user_cellphone")
                location.href="index.html"
            },
            //跳转到登录页面
            login(){
                location.href='login.html'
            },
            //检查是否登录
            checkIsLogin(){
                if(getToken()){
                    this.islogin=true;
                }
            },
        },
        /**
         * 调用this.resetStarClass()初始化评分页面中星星的css
         * 调用this.movieId=GetQueryString("movieId")从当前页面的url中获取参数movieId,这个movieId是从其他页面跳转到当前页面时候传过来的参数
         * 调用this.checkCommentExist()访问服务端，查看是否有评论内容，如果有，加载到页面上评论输入框中（这个评论是当前用户，对当前这个电影的评论内容）
         * 调用this.checkWantExist()访问服务端，查看是否有点击过"想看"按钮，如果有，设置一下页面上的“想看”按钮的css
         * 调用this.loadCommentList()访问服务端，加载到评论列表中，这个评论列表是所有用户对当前这个电影的评论
         * 调用this.loadMovie()访问服务端，加载当前电影的信息
         */
        created() {
            this.checkIsLogin();
            this.movieId=GetQueryString("movieId");
            this.loadMovie();
            this.queryMovieActors();
            this.loadCommentList();
            this.queryMovieImages();
            this.checkWantExist();
            this.checkCommentExist();
        },
        //为了避免在页面加载的时候评论弹出框显示一下后，又消失，把评论弹出框的style初始值设置为display:none，
        // 在页面加载完成后，把这个值删掉，否则点击 评分按钮时候无法显示评论的弹出框
		//this.removeClass()
        mounted(){
            // this.removeClass()
        }
    })


</script>
</html>
